<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style>
        .jia:hover{
            color: #01AAED;
            cursor: pointer;
        }
        .jian:hover{
            color: #01AAED;
            cursor: pointer;

        }
    </style>
</head>
<body>

<div class="layui-form">
    <form class="layui-form layui-form-pane" >

        <div class="layui-inline">
            <label class="layui-form-label">入库仓库</label>
            <div class="layui-input-inline">
                <select name="repostoryType"  class="layui-input repositoryId" lay-filter="repositoryId">
                    <c:forEach items="${repostoryTypes}" var="repostoryTypes">
                        <option value="${repostoryTypes.reponseTypePid}">${repostoryTypes.reponseTypeName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">供应商</label>
            <div class="layui-input-inline">
                <select name="supplier"  class="layui-input supplier" lay-filter="repositoryId">
                    <c:forEach items="${supplierList}" var="supplier">
                        <option value="${supplier.supplierId}">${supplier.supplierName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 20px;font-weight: bold;font-size: 18px">
           <div class="repostorycapacity">仓库剩余容量:<span></span></div>
        </div>

        <div class="layui-inline" style="margin-left: 20px;font-weight: bold;font-size: 18px">
            <div class="goodscapacity">采购商品共需容量:<span>0</span></div>
        </div>

        <div style="height: 500px;border-style: solid;border-width: 1px;overflow-y: auto;border-color: #E1E1E1">
            <table class="layui-table table" lay-size="lg" align="center" >
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>操作</th>
                    <th>采购商品</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>品牌</th>
                    <th>单位</th>
                    <th>所占容量</th>
                    <th>采购数量</th>
                    <th>商品进价</th>
                    <th>小计</th>
                </tr>
                </thead>
                <tr class="biaoge">
                    <td align="center">
                        <i class="layui-icon layui-icon-addition jia" style="font-size: 20px;font-weight: bold"></i>
                    </td>
                    <td>
                        <div class="layui-inline">
                            <div class="layui-input-inline shangpindiv">
                                <select name="purchaseState"  lay-verify="required"  class="layui-input shangpin" lay-filter="shangpin">
                                    <option value="">请选择</option>
                                    <c:forEach items="${goodsList}" var="goods">
                                        <option value="${goods.goodsId}">${goods.goodsName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td >

                    </td>
                    <td>

                    </td>
                    <td>

                    </td>
                    <td>

                    </td>
                    <td>

                    </td>
                    <td style="width: 100px">
                        <div class="layui-inline">
                            <div class="layui-input-inline" >
                                <input type="number"  name="purchaseCount" required="" lay-verify="required" placeholder="采购数量" autocomplete="off" class="layui-input ShangjiaNumber purchaseCount">
                            </div>
                        </div>
                    </td>
                    <td style="width: 100px">
                        <div class="layui-inline">
                            <div class="layui-input-inline" >
                                <input type="text"  name="purchasingPrice" required="" lay-verify="required" placeholder="商品进价" autocomplete="off" class="layui-input purchasingPrice">
                            </div>
                        </div>
                    </td>
                    <td style="width: 150px" class="xiaoji">

                    </td>
                </tr>

            </table>

        </div>
        <div style="margin-top: 40px;border-style: solid;border-width: 1px; border-color: #E1E1E1">
            <div class="layui-inline" style="width: 360px;margin-top: 5px;margin-left: 10px">
                <label class="layui-form-label">采购总数量</label>
                <div class="layui-input-inline" style="width: 240px">
                    <input type="text" name="goodsStotalCount"  required="" lay-verify="required"  autocomplete="off" class="layui-input  layui-btn-disabled caigoushu">
                </div>
            </div>
            <div class="layui-inline" style="width: 360px;margin-top: 5px;margin-left: 10px">
                <label class="layui-form-label">总金额</label>
                <div class="layui-input-inline" style="width: 240px">
                    <input type="text" name="totalPrice"  required="" lay-verify="required"  autocomplete="off" class="layui-input  layui-btn-disabled zongjiner">
                </div>
            </div>
            <div class="layui-inline" style="width: 360px;margin-top: 5px;margin-left: 10px">
                <label class="layui-form-label">大写金额</label>
                <div class="layui-input-inline" style="width: 240px">
                    <input type="text" name="sapplicationGoodsCount"  required="" lay-verify="required"  autocomplete="off" class="layui-input  layui-btn-disabled priceMax">
                </div>
            </div>
            <div class="layui-form-item  layui-form-text" style="width: 1098px;margin-left: 10px;margin-top: 10px">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="remarks" class="layui-textarea remarks"></textarea>
                </div>
            </div>
            <div class="layui-inline" style="margin-top: -20px;margin-left: 1530px">
                <button type="button"  id="shelfapplications" data-type="loa" class="layui-btn  site-demo-active layui-btn-normal  layui-btn-primary" lay-submit lay-filter="addshelfapplications"><i class="layui-icon layui-icon-ok">提交申请</i></button></div>
        </div>

    </form>
    <div style="width: 1000px;height: 40px;position: fixed;left: 300px;top: 250px;background-color: #000;padding: 30px;opacity: 0.5" id="lod">
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo" style="margin-top: 10px">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
</div>


<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>

<script>
    //引入table
    layui.use(['element','laydate','table','form'],function () {
        var $ = layui.jquery
        var from = layui.form;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        let element = layui.element;


        //查询仓库容量
        $.post("repostory/ajaxSelectIdRepostory",{rid:$(".repositoryId").val()},function (obj){
            var repostory = JSON.parse(obj.data);
            //计算仓库剩余容量赋值
            var repostoryCapacity = parseFloat(repostory.capcity)-parseFloat(repostory.capcityxhao);
            //赋值
            $(".repostorycapacity").find("span").text(repostoryCapacity);
        })

        $("#lod").hide();
        //库存商品下拉框选择事件

        //事件,单击加号添加一个新的表格列
        $(".jia").click(jia)

        //采购数量的值改变事件
        $(".ShangjiaNumber").bind("change",numberChange);
        //商品进价值改变事件
        $(".purchasingPrice").bind("change",purchasingPriceChange)
        //仓库改变事件
        form.on("select(repositoryId)",function (data){
            //发送异步请求,查询指定仓库信息,展示出来仓库剩余容量
            $.post("repostory/ajaxSelectIdRepostory",{rid:data.value},function (obj){
               var repostory = JSON.parse(obj.data);
               //计算仓库剩余容量赋值
                var repostoryCapacity = parseFloat(repostory.capcity)-parseFloat(repostory.capcityxhao);
                //赋值
                $(".repostorycapacity").find("span").text(repostoryCapacity);
            })
        })


        /**
         * 商品选中事件
         */
        form.on("select(shangpin)",function (data){
            if (data.value==""){
                $(data.elem).parent().parent().parent().parent().find("td:eq(2)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(3)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(4)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(5)").text("");
                $(data.elem).parent().parent().parent().parent().find("td:eq(6)").text("");

                form.render();
                return;
            }
            //发送异步请求根据商品编号查询到商品指定信息
            $.post("goods/ajaxSelectIdGoods",{goodsId:data.value},function (result){
                var goods = JSON.parse(result.data);
                console.log(goods)
                //拼接信息
                $(data.elem).parent().parent().parent().parent().find("td:eq(2)").text(goods.goodsName);
                $(data.elem).parent().parent().parent().parent().find("td:eq(3)").text(goods.goodsPrice);
                $(data.elem).parent().parent().parent().parent().find("td:eq(4)").text(goods.brand.brandName);
                $(data.elem).parent().parent().parent().parent().find("td:eq(5)").text(goods.specifiCations);
                $(data.elem).parent().parent().parent().parent().find("td:eq(6)").text(goods.capacity);






                let totalPricex = null;
                //循环所有小计叠加给总金额
                $(".xiaoji").each(function (index){
                    if (!isNaN(parseFloat($(this).text()))){
                        totalPricex  += parseFloat($(this).text());

                    }else{
                        return;
                    }
                })
                //发送异步请求获取转换成大写的金额
                $.post("utils/priceMax",{price:totalPricex},function (priceMax){
                    //大写金额赋值
                    $(".priceMax").val(priceMax);
                })
                //赋值给总金额
                $(".zongjiner").val(totalPricex);

                var count = null;
                //循环所有上架数量追加至上架数量
                $(".purchaseCount").each(function (index){
                    if ($(this).val()!=null&&$(this).val()!=""){
                        count +=parseInt($(this).val());
                    }

                })


                //追加上架数量
                $(".caigoushu").val(count);
                purchaseGoodscocacity();

            })
        })








        //提交申请
        form.on("submit(addshelfapplications)",function (data){
            //判断采购共需容量是否大于了仓库剩余容量
            let repostory =  parseFloat($(".repostorycapacity").find("span").text());
            let goodscocacity = parseFloat($(".goodscapacity").find("span").text())
            if (goodscocacity>repostory){
                layer.alert("您采购的商品仓库无法容下!",{icon:2},function (index){
                    layer.close(index);
                })
            }else{
                $("#id").show();
                //触发事件
                var active = {
                    loa: function(othis){
                        $("#lod").show();
                        var DISABLED = 'layui-btn-disabled';
                        if(othis.hasClass(DISABLED)){
                            return;
                        }
                        //模拟loading
                        var n = 0, timer = setInterval(function(){
                            n = n + Math.random()*10|0;
                            if(n>100){
                                n = 100;
                                clearInterval(timer);
                                othis.removeClass(DISABLED);
                                //进行数据的提交,将所有的tr内容转换为json格式

                                //声明一个数组用来存储详情信息
                                var purchases = new Array();



                                //循环采购详情
                                $(".table tr:gt(0)").each(function(index){
                                    //商品编号
                                    let goodsId = $(this).find("td:eq(1)").find(".shangpin").val();
                                    //采购数量
                                    let purchaseCount = $(this).find("td:eq(7)").find(".purchaseCount").val();
                                    //采购进价
                                    let purchasingPrice = $(this).find("td:eq(8)").find(".purchasingPrice").val();
                                    //小计
                                    let purchasetotalPrice = $(this).find("td:eq(9)").text();

                                    //拼接成字符串
                                    var purchaseDetais = "{'goods':"+goodsId+",'purchaseCount':"+purchaseCount+",'purchasingPrice':"+purchasingPrice+",'purchasetotalPrice':"+purchasetotalPrice+"}";
                                    purchases[index] =purchaseDetais;

                                })

                                //发送异步请求,进行采购申请单添加
                                $.post("purchase/addPurchase",{purchases:purchases,purchaseType:"进货",goodstotalCount:$(".caigoushu").val(),totalPrice:$(".zongjiner").val(),supplier:$(".supplier").val(),repostoryType:$(".repositoryId").val(),capacity:$(".goodscapacity").find("span").text(),remarkes:$(".remarks").val()},function (result){
                                    if (result.success){
                                        layer.alert("申请已提交",{icon:1},function (index){
                                            window.close();
                                            parent.parent.location.reload(); // 父页面刷新
                                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                                        })
                                    }
                                })





                            }
                            element.progress('demo', n+'%');
                        }, 1+Math.random()*1000);

                        othis.addClass(DISABLED);
                    }

                };

                $('.site-demo-active').on('click', function(){
                    var othis = $(this), type = $(this).data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });
            }
        })




        //商品进价选中
        function  purchasingPriceChange(){
            if ($(this).parent().parent().parent().parent().find(".purchaseCount").val()==""){
                $(this).val("");
                layer.alert("请先填写您的采购数量!",{icon:2},function (index){
                    layer.close(index);
                })
            }
            //把金额添加到小计
            let price = $(this).val();
            let goodsCount = $(this).parent().parent().parent().parent().find(".purchaseCount").val();
             let totalPrice =   goodsCount*parseFloat(price);
            if (isNaN(totalPrice)){
                //算出钱
                $(this).parent().parent().parent().parent().find("td:last").text("");
                return;
            }else{
                //算出钱                                                          //只保留一位小数点
                $(this).parent().parent().parent().parent().find("td:last").text(totalPrice.toFixed(1));
            }


            let totalPricex = null;
            //循环所有小计叠加给总金额
            $(".xiaoji").each(function (index){
                if (!isNaN(parseFloat($(this).text()))){
                    totalPricex  += parseFloat($(this).text());

                }else{
                return;
                }



            })
            //发送异步请求获取转换成大写的金额
            $.post("utils/priceMax",{price:totalPricex},function (priceMax){
                //大写金额赋值
                $(".priceMax").val(priceMax);
            })
            //赋值给总金额
            $(".zongjiner").val(totalPricex);
        }


        //采购数量选中方法
        function numberChange(){
            //判断是否商品选中
            if ($(this).parent().parent().parent().parent().find(".shangpin").val()==""){
                $(this).val(null);
                //提示请先选中商品
                layer.alert("请先选择您的商品哦亲亲!",{icon:2},function (index){
                    layer.close(index);
                })
            }else{
                //不让上架数量大于库存数量
                if ($(this).val()<=0){
                    $(this).val(null);
                    layer.alert("采购数量至少为1个!",{icon:2},function (index){
                        purchaseGoodscocacity();
                        layer.close(index);
                    })
                    return;
                }
                //重新计算小计
                //把金额添加到小计
                let goodsCount = $(this).parent().parent().parent().parent().find("td:eq(7)").find(".purchaseCount").val();
                let price = $(this).parent().parent().parent().parent().find("td:eq(8)").find(".purchasingPrice").val();
                let totalPrice =   goodsCount*parseFloat(price);
                if (isNaN(totalPrice)){
                    //算出钱
                    $(this).parent().parent().parent().parent().find("td:last").text("");

                }else{
                    //算出钱                                                          //只保留一位小数点
                    $(this).parent().parent().parent().parent().find("td:last").text(totalPrice.toFixed(1));
                }


                var count = null;
                    //循环所有上架数量追加至上架数量
                    $(".purchaseCount").each(function (index){
                        if ($(this).val()!=null&&$(this).val()!=""){
                            count +=parseInt($(this).val());
                        }

                    })

                let totalPricex = null;
                //循环所有小计叠加给总金额
                $(".xiaoji").each(function (index){
                    if (!isNaN(parseFloat($(this).text()))){
                        totalPricex  += parseFloat($(this).text());

                    }else{
                        return;
                    }
                })
                //发送异步请求获取转换成大写的金额
                $.post("utils/priceMax",{price:totalPricex},function (priceMax){
                    //大写金额赋值
                    $(".priceMax").val(priceMax);
                })
                //赋值给总金额
                $(".zongjiner").val(totalPricex);

                var count = null;
                //循环所有上架数量追加至上架数量
                $(".purchaseCount").each(function (index){
                    if ($(this).val()!=null&&$(this).val()!=""){
                        count +=parseInt($(this).val());
                    }

                })


                        //追加上架数量
                        $(".caigoushu").val(count);

                purchaseGoodscocacity();

            }
        }









        //计算采购商品共需容量
        function purchaseGoodscocacity(){
            var goodscopacity = null;
            var count =  null;
            var cocacity = null;
            $(".purchaseCount").each(function (index){

                    //循环采购数量
                    count = $(this).val();
                    cocacity = parseFloat($(this).parent().parent().parent().parent().find("td:eq(6)").text());
                    if (!isNaN(count*cocacity)){
                        goodscopacity+= count*cocacity;
                    }

            })
            //赋值给采购商品共需容量
            $(".goodscapacity").find("span").text(goodscopacity.toFixed(1));
        }







        function jia() {
            var tr = "     <tr class=\"biaoge\">\n" +
                "                    <td align=\"center\">\n" +
                "                        <i class=\"layui-icon layui-icon-addition jia\" style=\"font-size: 20px;font-weight: bold\"></i>\n" +
                "            <i class=\"layui-icon layui-icon-subtraction jian\"  style=\"font-size: 20px;font-weight: bold\"></i>\n" +
                "                    </td>\n" +
                "                    <td>\n" +
                "                        <div class=\"layui-inline\">\n" +
                "                            <div class=\"layui-input-inline shangpindiv\">\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </td>\n" +
                "                    <td >\n" +
                "\n" +
                "                    </td>\n" +
                "                    <td>\n" +
                "\n" +
                "                    </td>\n" +
                "                    <td>\n" +
                "\n" +
                "                    </td>\n" +
                "                    <td>\n" +
                "\n" +
                "                    </td class='xiaoji'>\n" +
                "                    <td>\n" +
                "\n" +
                "                    </td>\n" +
                "                    <td style=\"width: 100px\">\n" +
                "                        <div class=\"layui-inline\">\n" +
                "                            <div class=\"layui-input-inline\" >\n" +
                "                                <input type=\"number\"  name=\"purchaseCount\" required=\"\" lay-verify=\"required\" placeholder=\"采购数量\" autocomplete=\"off\" class=\"layui-input ShangjiaNumber purchaseCount\">\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </td>\n" +
                "                    <td style=\"width: 100px\">\n" +
                "                        <div class=\"layui-inline\">\n" +
                "                            <div class=\"layui-input-inline\" >\n" +
                "                                <input type=\"text\"  name=\"purchasingPrice\" required=\"\" lay-verify=\"required\" placeholder=\"商品进价\" autocomplete=\"off\" class=\"layui-input purchasingPrice\">\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </td>\n" +
                "                    <td style=\"width: 150px\"class='xiaoji' >\n" +
                "\n" +
                "                    </td>\n" +
                "                </tr>";

            //拼接一个新的列
            $(".table").append(tr);
            var shangpin = $(".table tr:eq(1)").find(".shangpin").clone();
            //加上下拉
            $(".table tr:last").find(".shangpindiv").append(shangpin);
            //值归零
            $(".table tr:last").find(".shangpin").val("");

            form.render();
            //解绑重新绑定事件
            $(".jia").unbind("click",jia)
            $(".jia").bind("click",jia);
            $(".ShangjiaNumber").unbind("change",numberChange);
            $(".ShangjiaNumber").bind("change",numberChange);
            $(".purchasingPrice").unbind("change",purchasingPriceChange)
            $(".purchasingPrice").bind("change",purchasingPriceChange)
            $(".jian").click(function () {
                $(this).parent().parent().remove();
                //重新计算金额数量
                var count = null;
                //循环所有上架数量追加至上架数量
                $(".purchaseCount").each(function (index){
                    count += parseInt($(this).val());
                })

                if (isNaN(count)){
                    //追加上架数量
                    $(".caigoushu").val("");
                }else{
                    //追加上架数量
                    $(".caigoushu").val(count);
                }

                let totalPricex = null;
                //循环所有小计叠加给总金额
                $(".xiaoji").each(function (index){
                    totalPricex  += parseFloat($(this).text());
                })
                //发送异步请求获取转换成大写的金额
                $.post("utils/priceMax",{price:totalPricex},function (priceMax){
                    //大写金额赋值
                    $(".priceMax").val(priceMax);
                })

                //赋值给总金额
                $(".zongjiner").val(totalPricex);
                purchaseGoodscocacity();
            })
        }




    })


</script>



</body>
</html>